<!doctype html>
<html lang="en">
{% load static %}
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Charles Muchogo</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/album/">

    <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" >


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="album.css" rel="stylesheet">
  </head>
  <body>    
<main role="main">
  <section class="jumbotron text-center">
    <div class="container">
      <h1 class="jumbotron-heading">Charles Muchogo</h1>
      <p class="lead text-muted">I enjoy making websites.I also enjoy playing computer games<p>
        <a href="mailto:muchogoc@hotmail.com" class="btn btn-primary my-2">Email Me</a>
      </p>
      <img src="{% static 'sneaker head.jpg' %}" height = 200></img>
    </div>
  </section>

  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row">
            {% for job in jobs.all %}
        <div class="col-md-4">
            <a href="{% url 'detail' job.id %}">
          <div class="card mb-4 shadow-sm">
              <img src="{{ job.image.url }}"></img>
            <div class="card-body">
              <p class="card-text"> {{ job.summary }} </p>
            </div>
          </div>
          </a>
        </div>
        {% endfor %}
      </div>

    </div>
  </div>

</main>

<script src="{% static 'jquery-3.4.1.min.js '%}"></script>
<script src="{% static 'popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

</body>
</html>
